<!DOCTYPE html>
<html lang="zh-Hans">
<head>

    <!--[if lt IE 9]>
        <style>body {display: none; background: none !important} </style>
        <meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="yeshiyuan" />



<meta name="description" content="前言在Android原生开发中，我们的App往往由许多个界面构成，这些个界面往往又是一个个Activity，一个界面即一个Activity，当然也有可能是一个Activity里面的多个Fragment。我们应用使用过程中就需要不断的切换这些个界面，在原生开发中，我们切换Activity非常简单，只需要在AndroidManifest中注册我们的Activity，然后实现如下代码：">
<meta name="keywords" content="react-native">
<meta property="og:type" content="article">
<meta property="og:title" content="react-native学习系列-界面导航器(Navigator)">
<meta property="og:url" content="https://yeshiyuan00.github.io/2016/09/09/react-native学习系列-界面导航器-Navigator/index.html">
<meta property="og:site_name" content="blog">
<meta property="og:description" content="前言在Android原生开发中，我们的App往往由许多个界面构成，这些个界面往往又是一个个Activity，一个界面即一个Activity，当然也有可能是一个Activity里面的多个Fragment。我们应用使用过程中就需要不断的切换这些个界面，在原生开发中，我们切换Activity非常简单，只需要在AndroidManifest中注册我们的Activity，然后实现如下代码：">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://yeshiyuan00.github.io/img/9/firstpage.png">
<meta property="og:image" content="https://yeshiyuan00.github.io/img/9/secondpage.png">
<meta property="og:updated_time" content="2018-07-04T02:37:48.726Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="react-native学习系列-界面导航器(Navigator)">
<meta name="twitter:description" content="前言在Android原生开发中，我们的App往往由许多个界面构成，这些个界面往往又是一个个Activity，一个界面即一个Activity，当然也有可能是一个Activity里面的多个Fragment。我们应用使用过程中就需要不断的切换这些个界面，在原生开发中，我们切换Activity非常简单，只需要在AndroidManifest中注册我们的Activity，然后实现如下代码：">
<meta name="twitter:image" content="https://yeshiyuan00.github.io/img/9/firstpage.png">

<link rel="apple-touch-icon" href= "/apple-touch-icon.png">


    <link rel="alternate" href="/atom.xml" title="blog" type="application/atom+xml">



    <link rel="shortcut icon" href="/favicon.png">



    <link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">



    <link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">



    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">


<link rel="stylesheet" href="/css/style.css">



<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">


<title>react-native学习系列-界面导航器(Navigator) | blog</title>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<script>
    var yiliaConfig = {
        fancybox: true,
        animate: true,
        isHome: false,
        isPost: true,
        isArchive: false,
        isTag: false,
        isCategory: false,
        fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        search: undefined
    }
</script>


    <script> yiliaConfig.jquery_ui = [false]; </script>



    <script> yiliaConfig.rootUrl = "\/";</script>






</head>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/avatar.jpeg" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">yeshiyuan</a></h1>
        </hgroup>

        
        <p class="header-subtitle">yeshiyuan‘s blog</p>
        

        


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签云</a></li>
                        
                            <li><a href="/about/">关于我</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" href="mailto:921052416@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" href="/yeshiyuan00" title="GitHub"></a>
                            
                                <a class="fa RSS" href="/atom.xml" title="RSS"></a>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/FFmpeg/">FFmpeg</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jenkins/">jenkins</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/react-native/">react-native</a></li></ul>
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
                    
                      <a class="main-nav-link switch-friends-link" href="https://pages.github.com/">GitHub</a>
                    
                      <a class="main-nav-link switch-friends-link" href="http://moxfive.xyz/">MOxFIVE</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">专注于前端</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">yeshiyuan</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/avatar.jpeg" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">yeshiyuan</a></h1>
            </hgroup>
            
            <p class="header-subtitle">yeshiyuan‘s blog</p>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签云</a></li>
                
                    <li><a href="/about/">关于我</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" target="_blank" href="mailto:921052416@qq.com" title="Email"></a>
                            
                                <a class="fa GitHub" target="_blank" href="/yeshiyuan00" title="GitHub"></a>
                            
                                <a class="fa RSS" target="_blank" href="/atom.xml" title="RSS"></a>
                            
                        </ul>
            </nav>
        </header>                
    </div>
    <link class="menu-list" tags="标签" friends="友情链接" about="关于我"/>
</nav>
      <div class="body-wrap"><article id="post-react-native学习系列-界面导航器-Navigator" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/09/09/react-native学习系列-界面导航器-Navigator/" class="article-date">
      <time datetime="2016-09-09T09:54:37.000Z" itemprop="datePublished">2016-09-09</time>
</a>


    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      react-native学习系列-界面导航器(Navigator)
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        

        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react-native/">react-native</a></li></ul>
    </div>

        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>在Android原生开发中，我们的App往往由许多个界面构成，这些个界面往往又是一个个Activity，一个界面即一个Activity，当然也有可能是一个Activity里面的多个Fragment。我们应用使用过程中就需要不断的切换这些个界面，在原生开发中，我们切换Activity非常简单，只需要在AndroidManifest中注册我们的Activity，然后实现如下代码：  </p>
<a id="more"></a>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Intent intent = new Intent(FirstActivity.this,SecondActivity.class);</span><br><span class="line">startActivity(intent);</span><br></pre></td></tr></table></figure>
<p>就是这个简单，如果需要在不同的Activity之间传递数据，只需要在intent中传入我们需要的数据即可，这不在本文的讨论范围内。<br>我们知道，当我们使用react-native开发时，只是在一个Activity中绑定了一个’index.android.js’,这个js模块只是其中一个界面，那么要怎么实现多个界面呢？这个时候我们的Navigator就登场了！</p>
<h3 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h3><p>在官方文档中对Navigator的描述如下：  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Navigator handles the transition between different scenes in your app. It is implemented in JavaScript and is available on both iOS and Android. If you are targeting iOS only, you may also want to consider using NavigatorIOS as it leverages native UIKit navigation</span><br></pre></td></tr></table></figure>
<p>我的英文不大好，就不翻译了，大体的意思就是说Navigator它控制了不同页面之间的跳转。我们一般将Navigator作为整个应用的根View，这样方便控制应用中各个不同界面的跳转。</p>
<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p>下面是官方提供的一个例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">import React, &#123; Component &#125; from &apos;react&apos;;</span><br><span class="line">import &#123; Text, Navigator &#125; from &apos;react-native&apos;;</span><br><span class="line"></span><br><span class="line">export default class NavAllDay extends Component &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;Navigator</span><br><span class="line">        initialRoute=&#123;&#123; title: &apos;Awesome Scene&apos;, index: 0 &#125;&#125;</span><br><span class="line">        renderScene=&#123;(route, navigator) =&gt;</span><br><span class="line">          &lt;Text&gt;Hello &#123;route.title&#125;!&lt;/Text&gt;</span><br><span class="line">        &#125;</span><br><span class="line">        style=&#123;&#123;padding: 100&#125;&#125;</span><br><span class="line">      /&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>renderScene方法渲染各个界面的布局，我们需要为每一个界面啊都提供一个独一无二的route，这些route包含个每个界面所需要的信息。<br>上面的例子可能还不够直观，下面我们实现一个界面跳转的例子：  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  const routes = [</span><br><span class="line">    &#123;title: &apos;First Scene&apos;, index: 0&#125;,</span><br><span class="line">    &#123;title: &apos;Second Scene&apos;, index: 1&#125;,</span><br><span class="line">  ];</span><br><span class="line">  return (</span><br><span class="line">    &lt;Navigator</span><br><span class="line">      initialRoute=&#123;routes[0]&#125;</span><br><span class="line">      initialRouteStack=&#123;routes&#125;</span><br><span class="line">      renderScene=&#123;(route, navigator) =&gt;</span><br><span class="line">        &lt;TouchableHighlight onPress=&#123;() =&gt; &#123;</span><br><span class="line">          if (route.index === 0) &#123;</span><br><span class="line">            navigator.push(routes[1]);</span><br><span class="line">          &#125; else &#123;</span><br><span class="line">            navigator.pop();</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;&#125;&gt;</span><br><span class="line">        &lt;Text&gt;Hello &#123;route.title&#125;!&lt;/Text&gt;</span><br><span class="line">        &lt;/TouchableHighlight&gt;</span><br><span class="line">      &#125;</span><br><span class="line">      style=&#123;&#123;padding: 100&#125;&#125;</span><br><span class="line">    /&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>可以看到我们提供了两个route，代表了有两个界面。我们在renderScene中根据route的内容来决定渲染的界面，navigator.push(route)将弹出一个新的界面，并将其压入栈中，弹出的界面由route来决定。navigator.pop()方法将当前的界面跳出，跳转到栈的上一个界面中。效果图如下：<br><img src="/img/9/firstpage.png" alt=""><br><img src="/img/9/secondpage.png" alt=""><br>如上图，我们在第一个界面点击屏幕，跳转到第二个界面，第二个界面中点击屏幕，第二个界面将被弹出，然后跳转到栈中的上一个界面即第一个界面。  </p>
<h3 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h3><p>使用navigator默认的界面跳转动画是从右边进入的动画，要更改界面的跳转动画，可以通过设置configureScene来实现：  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;Navigator</span><br><span class="line">  renderScene=&#123;(route, navigator) =&gt;</span><br><span class="line">    // ...</span><br><span class="line">  &#125;</span><br><span class="line">  configureScene=&#123;(route, routeStack) =&gt;</span><br><span class="line">    Navigator.SceneConfigs.FloatFromBottom&#125;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<p>上面的代码将跳转动画改为了下面进入的动画。当然，Navigator还为我们提供了很多其他的切换动画。<br>navigator的方法：  </p>
<ul>
<li>getCurrentRoutes()    该进行返回存在的路由列表信息</li>
<li>jumpBack()    该进行回退操作  但是该不会卸载(删除)当前的页面</li>
<li>jumpForward()    进行跳转到相当于当前页面的下一个页面</li>
<li>jumpTo(route)    根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)</li>
<li>push(route)     导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去</li>
<li>pop()   当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面</li>
<li>replace(route)   只用传入的路由的指定页面进行替换掉当前的页面</li>
<li>replaceAtIndex(route,index)     传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面</li>
<li>replacePrevious(route)    传入路由，通过指定路由的页面替换掉前一个页面</li>
<li>resetTo(route)  进行导航到新的界面，并且重置整个路由栈</li>
<li>immediatelyResetRouteStack(routeStack)   该通过一个路由页面数组来进行重置路由栈</li>
<li>popToRoute(route)   进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除</li>
<li>popToTop()  进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除</li>
</ul>

      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2016/09/09/react-native学习系列-界面导航器-Navigator/">react-native学习系列-界面导航器(Navigator)</a></p>
        <p><span>文章作者:</span><a href="/" title="回到主页">yeshiyuan</a></p>
        <p><span>发布时间:</span>2016-09-09, 17:54:37</p>
        <p><span>最后更新:</span>2018-07-04, 10:37:48</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2016/09/09/react-native学习系列-界面导航器-Navigator/" title="react-native学习系列-界面导航器(Navigator)">https://yeshiyuan00.github.io/2016/09/09/react-native学习系列-界面导航器-Navigator/</a>
            <span class="copy-path" data-clipboard-text="原文: https://yeshiyuan00.github.io/2016/09/09/react-native学习系列-界面导航器-Navigator/　　作者: yeshiyuan" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/2017/08/06/hello-world/">
                    Hello World
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2016/09/02/react-native学习系列-使用数据库realm/">
                    react-native学习系列-使用数据库realm
                </a>
            </div>
        
    </nav>

  
</article>

    <div id="toc" class="toc-article">
        <strong class="toc-title">文章目录</strong>
        
            <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#前言"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#概述"><span class="toc-number">2.</span> <span class="toc-text">概述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用"><span class="toc-number">3.</span> <span class="toc-text">使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#方法"><span class="toc-number">4.</span> <span class="toc-text">方法</span></a></li></ol>
        
    </div>
    <style>
        .left-col .switch-btn,
        .left-col .switch-area {
            display: none;
        }
        .toc-level-3 i,
        .toc-level-3 ol {
            display: none !important;
        }
    </style>

    <input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">

    <script>
        yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
    </script>



    
<div class="share">
    
        <div class="bdsharebuttonbox">
            <a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"></a>
            <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
            <a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
            <a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
            <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
            <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i></a>
        </div>
        <script>
            window._bd_share_config={
                "common":{"bdSnsKey":{},"bdText":"react-native学习系列-界面导航器(Navigator)　| blog　","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        </script>
    

    
</div>







    
        <!-- 来必力City版安装代码 -->
<div id="lv-container" data-id="city" data-uid="MTAyMC8zNzg0My8xNDM3Mw==">
<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
<noscript>为正常使用来必力评论功能请激活JavaScript</noscript>
</div>
<!-- City版安装代码已完成 -->
    




    <div class="scroll" id="post-nav-button">
        
            <a href="/2017/08/06/hello-world/" title="上一篇: Hello World">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2016/09/02/react-native学习系列-使用数据库realm/" title="下一篇: react-native学习系列-使用数据库realm">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2017/08/06/FFmpeg学习系列-移植FFmpeg到Android平台/">FFmpeg学习系列-移植FFmpeg到Android平台</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/08/06/hello-world/">Hello World</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/09/09/react-native学习系列-界面导航器-Navigator/">react-native学习系列-界面导航器(Navigator)</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/09/02/react-native学习系列-使用数据库realm/">react-native学习系列-使用数据库realm</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/09/02/react-native学习系列-网络请求API/">react-native学习系列-网络请求API</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/26/react-native学习系列-弹性布局FlexBox/">react-native学习系列--弹性布局FlexBox</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/26/react-native学习系列-组件学习2-其它常用控件/">react-native学习系列--组件学习2(其它常用控件)</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/26/react-native学习系列-组件学习1-ListView/">react-native学习系列--组件学习1(ListView)</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/19/react-native学习系列-在已存在的项目中集成/">react-native学习系列--在已存在的项目中集成</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/19/react-native学习系列-环境搭建/">react-native学习系列--环境搭建</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/08/04/jenkins自动构建Android项目/">jenkins自动构建Android项目</a></li></ul>




    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                <i class="fa fa-copyright"></i> 
                2016-2018 yeshiyuan
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="快速、简洁且高效的博客框架">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="简而不减 Hexo 双栏博客主题  v3.5">Yelee</a> by MOxFIVE <i class="fa fa-heart animated infinite pulse"></i>
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" title="本站到访数"><i class="fa fa-user" aria-hidden="true"></i><span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>| </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit"  title="本页阅读量"><i class="fa fa-eye animated infinite pulse" aria-hidden="true"></i><span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>





<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="load$hide();" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        var oOpenInNew = {
            
            
            
            
            
            
             archives: ".archive-article-title", 
             miniArchives: "a.post-list-link", 
            
             friends: "#js-friends a", 
             socail: ".social a" 
        }
        for (var x in oOpenInNew) {
            $(oOpenInNew[x]).attr("target", "_blank");
        }
    
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
</body>
</html>